const title = document.getElementById("title");

// 监听页面滚动-文字

window.addEventListener("scroll", function () {
        const rect = title.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom >= 0) {
                title.style.opacity = 1;
                title.style.transform = "translateY(-20px)";
                title.style.transition = "all 0.5s ease-in-out 0.3s";
        } else {
                title.style.opacity = 0;
                title.style.transform = "translateY(20px)";
                title.style.transition = "all 0.5s ease-in-out 0.4s";
        }

        // 监听页面滚动-文字轮播

        if (rect.top < window.innerHeight && rect.bottom >= 0) {
                word.style.opacity = 1;
                word.style.transform = "translateY(-10px)";
                word.style.transition = "all 0.5s ease-in-out 0.3s";
        } else {
                word.style.opacity = 0;
                word.style.transform = "translateY(10px)";
                word.style.transition = "all 0.5s ease-in-out 0.4s";
        }
});

//文字垂直轮播区域-自动轮播
const word = document.getElementById("word");
const wordUl = document.getElementById("wordUl");
const wordLi = wordUl.getElementsByTagName("li");

//复制文字内容
// wordUl.innerHTML += wordUl.innerHTML;
wordUl.style.height = wordLi[0].offsetHeight * wordLi.length + 'px';

// 初始化变量
let wordIndex = 0;
let wordSpeed = 27;
let wordCurrentPosition = 0;

//创建定时器
var timeId = setInterval(
        function wordScroll() {
                wordIndex++;
                wordCurrentPosition -= wordSpeed;

                // 不断移动
                wordUl.style.transform = `translateY(${wordCurrentPosition}px)`;

                // 添加过渡效果
                wordUl.style.transition = "all 0.5s ease-in-out";

                // 文字轮播完毕， 重置位置
                if (wordIndex == 7) {
                        wordUl.style.transition = "none";
                        wordCurrentPosition = 0;
                        wordIndex = 0;
                        wordUl.style.transform = `translateY(${wordCurrentPosition}px)`;
                }
        }
        , 3000);

// 监听页面滚动-文字轮播


// 图片水平轮播 - 第一行图片自动轮播
const firstUl = document.getElementById("firstUl");
const listLi = firstUl.getElementsByTagName("li");
const liMargin = 22 //若li有margin-right ： 22px
// 添加CSS过渡样式        
firstUl.innerHTML += firstUl.innerHTML;
firstUl.style.width = (listLi[0].offsetWidth * listLi.length) + liMargin * listLi.length + 'px';

// 初始化变量
let speed = 1;
let currentPosition = 0;

function smoothScroll() {
        currentPosition -= speed;
        // 重置位置时取消过渡
        if (Math.abs(currentPosition) >= firstUl.offsetWidth / 2) {
                //当滚动了一轮， 重置 position， 实现无缝轮播
                currentPosition = 0;
        }
        firstUl.style.transform = `translateX(${currentPosition}px)`;
        requestAnimationFrame(smoothScroll);
}
requestAnimationFrame(smoothScroll);

// 图片水平轮播 - 第二行图片自动轮播
const secondUl = document.getElementById("secondUl");
const secondListLi = secondUl.getElementsByTagName("li");
const secondLiMargin = 22 //若li有margin-right ： 22px

// 添加CSS过渡样式        
secondUl.innerHTML += secondUl.innerHTML;
secondUl.style.width = (secondListLi[0].offsetWidth * secondListLi.length) + secondLiMargin * secondListLi.length + 'px';

// 窗口宽度
const windowWidth = document.documentElement.clientWidth;

// 初始化变量
let secondSpeed = 1;
let secondCurrentPosition = -secondUl.offsetWidth + windowWidth;

function secondSmoothScroll() {
        secondCurrentPosition += secondSpeed;
        // 重置位置时取消过渡
        if (Math.abs(secondCurrentPosition) <= secondUl.offsetWidth / 2 - windowWidth) {
                //当滚动了一轮， 重置 position， 实现无缝轮播
                secondCurrentPosition = -secondUl.offsetWidth + windowWidth;
        }
        secondUl.style.transform = `translateX(${secondCurrentPosition}px)`;
        requestAnimationFrame(secondSmoothScroll);
}
requestAnimationFrame(secondSmoothScroll);

// 图片水平轮播 - 第三行图片自动轮播
const thirdUl = document.getElementById("thirdUl");
const thirdListLi = thirdUl.getElementsByTagName("li");
const thirdLiMargin = 22 //若li有margin-right ： 22px

// 添加CSS过渡样式        
thirdUl.innerHTML += thirdUl.innerHTML;
thirdUl.style.width = (thirdListLi[0].offsetWidth * thirdListLi.length) + thirdLiMargin * thirdListLi.length + 'px';

// 初始化变量
let thirdSpeed = 1;
let thirdCurrentPosition = -thirdListLi[0].offsetWidth / 2;

function thirdSmoothScroll() {
        thirdCurrentPosition -= thirdSpeed;
        // 重置位置时取消过渡
        if (Math.abs(thirdCurrentPosition) >= (thirdUl.offsetWidth / 2) + thirdListLi[0].offsetWidth / 2) {
                //当滚动了一轮， 重置 position， 实现无缝轮播
                thirdCurrentPosition = -thirdListLi[0].offsetWidth / 2;
        }
        thirdUl.style.transform = `translateX(${thirdCurrentPosition}px)`;
        requestAnimationFrame(thirdSmoothScroll);
}
requestAnimationFrame(thirdSmoothScroll);


// 监听页面滚动-产品功能区域
const functionTitle = document.getElementById("function-container");

window.addEventListener("scroll", function () {
        const rect = functionTitle.getBoundingClientRect();
        if (rect.top < window.innerHeight) {
                functionTitle.style.opacity = 1;
                functionTitle.style.transform = "translateY(-50px)";
                functionTitle.style.transition = "all 0.6s ease-in-out";
        } else {
                functionTitle.style.opacity = 0;
                functionTitle.style.transform = "translateY(0px)";
                functionTitle.style.transition = "all 0.6s ease-in-out";
        }
});


// 产品功能轮播区域-自动轮播
// 创建变量
const photoUl1 = document.getElementById("photoUl1");
const photoLi1 = photoUl1.getElementsByTagName("li");
const photoUl2 = document.getElementById("photoUl2");
const photoLi2 = photoUl2.getElementsByTagName("li");
const photoUl3 = document.getElementById("photoUl3");
const photoLi3 = photoUl3.getElementsByTagName("li");
const container = document.getElementById("container");
const photoMargin = 15 //若li有margin-right ： 15px

// 复制图片内容
photoUl1.innerHTML += photoUl1.innerHTML;
photoUl2.innerHTML += photoUl2.innerHTML;
photoUl3.innerHTML += photoUl3.innerHTML;

//初始化变量
// 初始化Ul长度
photoUl1.style.width = photoLi1[0].offsetWidth * photoLi1.length + photoMargin * photoLi1.length + 'px';
photoUl2.style.width = photoLi2[0].offsetWidth * photoLi2.length + photoMargin * photoLi2.length + 'px';
photoUl3.style.width = photoLi3[0].offsetWidth * photoLi3.length + photoMargin * photoLi3.length + 'px';

//初始化轮播移动速度
let photoSpeed = 1;

// 窗口宽度
const ulWidth = container.offsetWidth;

// 初始化位置
let photoCurrentPosition1 = 0;
let photoCurrentPosition2 = -photoUl2.offsetWidth + ulWidth;
let photoCurrentPosition3 = -photoLi3[0].offsetWidth / 2;

// 创建移动函数
function photoScroll() {
        photoCurrentPosition1 -= photoSpeed;
        photoCurrentPosition2 += photoSpeed;
        photoCurrentPosition3 -= photoSpeed;

        // 第一行图片滚动
        // 重置位置时取消过渡
        if (Math.abs(photoCurrentPosition1) >= photoUl1.offsetWidth / 2) {
                //当滚动了一轮， 重置 position， 实现无缝轮播
                photoCurrentPosition1 = 0;
        }

        // 第二行图片滚动
        // 重置位置时取消过渡
        if (Math.abs(photoCurrentPosition2) <= (photoUl2.offsetWidth / 2) - ulWidth) {
                //当滚动了一轮， 重置 position， 实现无缝轮播
                photoCurrentPosition2 = -photoUl2.offsetWidth + ulWidth;
        }

        // 第三行图片滚动
        // 重置位置时取消过渡
        if (Math.abs(photoCurrentPosition3) >= photoUl3.offsetWidth / 2 + photoLi3[0].offsetWidth / 2) {
                //当滚动了一轮， 重置 position， 实现无缝轮播
                photoCurrentPosition3 = -photoLi3[0].offsetWidth / 2;
        }

        // 开始移动
        photoUl1.style.transform = `translateX(${photoCurrentPosition1}px)`;
        photoUl2.style.transform = `translateX(${photoCurrentPosition2}px)`;
        photoUl3.style.transform = `translateX(${photoCurrentPosition3}px)`;

        // 开始下一帧动画
        requestAnimationFrame(photoScroll);
}
requestAnimationFrame(photoScroll);



// 监听页面滚动-团队协作区域
const team = document.getElementById("team");

window.addEventListener("scroll", function () {
        const rect = team.getBoundingClientRect();
        if (rect.top < window.innerHeight) {
                team.style.opacity = 1;
                team.style.transform = "translateY(-50px)";
                team.style.transition = "all 0.6s ease-in-out";
        } else {
                team.style.opacity = 0;
                team.style.transform = "translateY(0px)";
                team.style.transition = "all 0.6s ease-in-out";
        }
});


// 监听页面滚动-卡片区域
const cardTitle = document.getElementById("card");

window.addEventListener("scroll", function () {
        const rect = cardTitle.getBoundingClientRect();
        if (rect.top < window.innerHeight) {
                cardTitle.style.opacity = 1;
                cardTitle.style.transform = "translateY(-50px)";
                cardTitle.style.transition = "all 0.6s ease-in-out";
        } else {
                cardTitle.style.opacity = 0;
                cardTitle.style.transform = "translateY(0px)";
                cardTitle.style.transition = "all 0.6s ease-in-out";
        }
});

// 获取DOM元素
const cardBox = document.getElementById("card-box");
const smallBox = document.getElementById("small-box");

// 初始化变量
let startX;
let startTranslateX = 0;
let isDragging = false;
let maxMove = -2150// 最大移动距离


// 鼠标按下事件处理
cardBox.addEventListener("mousedown", (e) => {
        isDragging = true;
        startX = e.clientX; // 修正：使用正确的clientX属性

        // 获取当前smallBox的translateX值
        const transformValue = window.getComputedStyle(smallBox).getPropertyValue('transform');
        if (transformValue !== 'none') {
                const matrix = new DOMMatrix(transformValue);
                startTranslateX = matrix.e; // e属性表示 translateX 值
        } else {
                startTranslateX = 0;
        }

        // 防止拖拽时选中文本
        e.preventDefault();
});

// 鼠标移动事件处理
cardBox.addEventListener("mousemove", (e) => {
        if (!isDragging) return;

        const moveX = e.clientX;
        const deltaX = moveX - startX; // 计算鼠标移动的距离
        const newTranslateX = startTranslateX + deltaX; // 基于之前的位置计算新位置

        // 应用新的translateX值
        if(newTranslateX <= maxMove && newTranslateX <= 0){
                smallBox.style.transform = `translateX(${maxMove}px)`;
        }else if(newTranslateX >=0){
                smallBox.style.transform = `translateX(${0}px)`;
        }else{
                smallBox.style.transform = `translateX(${newTranslateX}px)`;
        }
});

// 鼠标松开事件处理
cardBox.addEventListener("mouseup", () => {
        isDragging = false;
});

// 鼠标离开元素事件处理
cardBox.addEventListener("mouseleave", () => {
        isDragging = false;
});


// 监听页面滚动-law区域
const lawContainer = document.getElementById("lawContainer");
        window.addEventListener("scroll", function () {
        const rect = lawContainer.getBoundingClientRect();
        if (rect.top < window.innerHeight) {
                lawContainer.style.opacity = 1;
                lawContainer.style.transform = "translateY(-50px)";
                lawContainer.style.transition = "all 0.6s ease-in-out";
        } else {
                lawContainer.style.opacity = 0;
                lawContainer.style.transform = "translateY(0px)";
                lawContainer.style.transition = "all 0.6s ease-in-out";
        }
});

//law区域轮播
        //初始化变量
        var Card = document.querySelectorAll(".Card");
        const lawLeft = document.getElementById("lawLeft");
        const lawRight = document.getElementById("lawRight");

        //监听点击事件-左右箭头
        lawLeft.addEventListener("click", Prev);//向右切换
        lawRight.addEventListener("click", Next);//向左切换

        //将id名组成数组方便调用
        idArr = ["firstCard","secondCard","thirdCard","fourthCard","fifthCard","sixthCard","seventhCard"];

        //初始化位置
        initialize();

        //设置定时器让图片轮播
        var timer = setInterval(Next, 6000);

        //向左切换函数
        function Prev(){
                idArr.push(idArr.shift());
                initialize();//初始化位置
        }

        //向右切换函数
        function Next(){
                idArr.unshift(idArr.pop());
                initialize();//初始化位置
        }

        //初始化函数
        function initialize(){
                for(let i = 0; i < Card.length; i++){
                        Card[i].id = idArr[i];
                }
        }

// 监听页面滚动-回到顶部区域
const topBack = document.getElementById("topBack");
const body = document.body;

//监听页面滚动-显示回到顶部按钮
window.addEventListener("scroll", function () {
        const rect = body.getBoundingClientRect();
        if(rect.top < -20){
                topBack.style.display = "block";
        }else{
                topBack.style.display = "none";
        }
});

        // 点击事件-回到顶部
        topBack.addEventListener("click",function(){
                window.scrollTo(0,0);
        });

// 分别实现卡片区域接口部分与law区域接口部分

// 卡片接口
        // 创建对象
        const cardXHR = new XMLHttpRequest();
        
        // 初始化设置请求方法和url
        cardXHR.open("GET", "https://jxk.net.cn/img");

        // 发送请求
        cardXHR.send();

        // 监听请求状态
        cardXHR.onreadystatechange = function () {
                //当全部返回时
                if(cardXHR.readyState === 4 && cardXHR.status === 200){
                        // 获取数据
                        const ResponseData = JSON.parse(cardXHR.responseText);
                        //创建数组
                        const arr = ResponseData.data;
                        //获取DOM元素
                        const smallBox1 = document.getElementById("small-box");
                        //获取smallBox1的img元素
                        const arrImg = smallBox1.getElementsByTagName("img");
                        //遍历数组，设置图片路径
                        for(let i = 0; i < arr.length; i++){
                                arrImg[i].src = arr[i];
                        }
                }
        }


// law区域接口
        // 创建对象
        const lawXHR = new XMLHttpRequest();
        
        // 初始化设置请求方法和url
        lawXHR.open("GET", "https://jxk.net.cn/content");

        // 发送请求
        lawXHR.send();

        // 监听请求状态
        lawXHR.onreadystatechange = function () {
                //当全部返回时
                if(lawXHR.readyState === 4 && lawXHR.status === 200){
                        // 获取数据
                        const ResponseData = JSON.parse(lawXHR.responseText);
                        //创建数组
                        const arr = ResponseData.data;
                        //获取DOM元素
                        const lawBox = document.getElementById("lawBox");
                        const lawH1 = lawBox.getElementsByTagName("h1");
                        const lawP = lawBox.getElementsByTagName("p");
                        const lawImg = lawBox.getElementsByTagName("img");
                        //遍历数组，设置内容
                        for(let i = 0; i < arr.length; i++){
                                lawH1[i].innerHTML = arr[i].title;
                                lawP[i].innerHTML = arr[i].content;
                                lawImg[i].src = arr[i].imageUrl;
                        }
                }
        }

// 图片懒加载-团队协作区域
        //获取DOM元素
        const teamBox = document.getElementById("team-container");
        const teamImg = teamBox.getElementsByTagName("img");

        //监听页面滚动-加载图片
        window.addEventListener("scroll",function(){
                //遍历图片元素
                for(let i = 0; i < teamImg.length; i++){
                        //获取图片元素距离页面顶部的距离
                        const rect = teamImg[i].getBoundingClientRect();
                        //当图片元素距离页面顶部小于窗口高度时，加载图片
                        if(rect.top < window.innerHeight){
                                //获取图片路径
                                const src = teamImg[i].getAttribute("data-src");
                                //设置图片路径
                                teamImg[i].setAttribute("src",src);
                        }
                }
        });